<template>
  <Layout.Header :class="getHeaderClass">
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
      <AppLogo
        v-if="getShowHeaderLogo || getIsMobile"
        :class="`${prefixCls}-logo`"
        :theme="getHeaderTheme"
        :style="getLogoWidth"
      />
      <LayoutTrigger
        v-if="
          (getShowContent &&
            getShowHeaderTrigger &&
            !getSplit &&
            !getIsMixSidebar) ||
          getIsMobile
        "
        :theme="getHeaderTheme"
        :sider="false"
      />
      <LayoutBreadcrumb
        v-if="getShowContent && getShowBread"
        :theme="getHeaderTheme"
      />
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div v-if="getShowTopMenu && !getIsMobile" :class="`${prefixCls}-menu`">
      <LayoutMenu
        :isHorizontal="true"
        :theme="getHeaderTheme"
        :splitType="getSplitType"
        :menuMode="getMenuMode"
      />
    </div>
    <!-- menu-end -->

    <!-- action  -->
    <div :class="`${prefixCls}-action`">
      <AppSearch v-if="getShowSearch" :class="`${prefixCls}-action__item `" />

      <ErrorAction
        v-if="getUseErrorHandle"
        :class="`${prefixCls}-action__item error-action`"
      />



      <FullScreen
        v-if="getShowFullScreen"
        :class="`${prefixCls}-action__item fullscreen-item`"
      />



      <UserDropDown :theme="getHeaderTheme" />

      <SettingDrawer
        v-if="getShowSetting"
        :class="`${prefixCls}-action__item`"
      />
    </div>
  </Layout.Header>
</template>
<script lang="ts" setup>
import { Layout } from "ant-design-vue";
import { computed, unref } from "vue";

import {  AppLogo, AppSearch } from "@/components/Application";
import { SettingButtonPositionEnum } from "@/enums/appEnum";
import { MenuModeEnum, MenuSplitTyeEnum } from "@/enums/menuEnum";
import { useHeaderSetting } from "@/hooks/setting/useHeaderSetting";
import { useMenuSetting } from "@/hooks/setting/useMenuSetting";
import { useRootSetting } from "@/hooks/setting/useRootSetting";
import { useAppInject } from "@/hooks/web/useAppInject";
import { useDesign } from "@/hooks/web/useDesign";
import { createAsyncComponent } from "@/utils/factory/createAsyncComponent";
import { propTypes } from "@/utils/propTypes";

import LayoutMenu from "../menu/index.vue";
import LayoutTrigger from "../trigger/index.vue";
import {
  ErrorAction,
  FullScreen,
  LayoutBreadcrumb,
  UserDropDown,
} from "./components";

const SettingDrawer = createAsyncComponent(
  () => import("@/layouts/default/setting/index.vue"),
  {
    loading: true,
  },
);
defineOptions({ name: "LayoutHeader" });

const props = defineProps({
  fixed: propTypes.bool,
});
const { prefixCls } = useDesign("layout-header");
const {
  getShowTopMenu,
  getShowHeaderTrigger,
  getSplit,
  getIsMixMode,
  getMenuWidth,
  getIsMixSidebar,
} = useMenuSetting();
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } =
  useRootSetting();

const {
  getHeaderTheme,
  getShowFullScreen,
  getShowContent,
  getShowBread,
  getShowHeaderLogo,
  getShowHeader,
  getShowSearch,
} = useHeaderSetting();


const { getIsMobile } = useAppInject();

const getHeaderClass = computed(() => {
  const theme = unref(getHeaderTheme);
  return [
    prefixCls,
    {
      [`${prefixCls}--fixed`]: props.fixed,
      [`${prefixCls}--mobile`]: unref(getIsMobile),
      [`${prefixCls}--${theme}`]: theme,
    },
  ];
});

const getShowSetting = computed(() => {
  if (!unref(getShowSettingButton)) {
    return false;
  }
  const settingButtonPosition = unref(getSettingButtonPosition);

  if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
    return unref(getShowHeader);
  }
  return settingButtonPosition === SettingButtonPositionEnum.HEADER;
});

const getLogoWidth = computed(() => {
  if (!unref(getIsMixMode) || unref(getIsMobile)) {
    return {};
  }
  const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
  return { width: `${width}px` };
});

const getSplitType = computed(() => {
  return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
});

const getMenuMode = computed(() => {
  return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
});
</script>
<style lang="less">
@import url("./index.less");
</style>
